<template>
  <div>
  <div class="ff">
  <img @click="sss()" class="jt" src="/static/spxq/spxq-1.png" alt="">
  <p class="zi">商品详情</p>
  <div class="tu">
    <img src="/static/spxq/spxq-2.png" alt="">
    <img class="fx" src="/static/spxq/spxq-3.png" alt="">
    <img src="/static/spxq/spxq-4.png" alt="">
  </div>
</div>
    <id id="container">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide class="swiper-slide games">
          <img src="/static/spxq/1.png" alt="">
        </swiper-slide>
        <swiper-slide class="swiper-slide games">
          <img src="/static/spxq/1.png" alt="">
        </swiper-slide>
        <swiper-slide class="swiper-slide games">
          <img src="/static/spxq/1.png" alt="">
        </swiper-slide>
        <swiper-slide class="swiper-slide games">
          <img src="/static/spxq/1.png" alt="">
        </swiper-slide>
    <p class="swiper-pagination" slot="pagination"></p>
    </swiper>
    </id>

    <div class="kuang">
        <p class="bt">还剩100件，再不抢购就没了哦~</p>
      </div>
    <div class="wenzi">
      <img class="gq" src="/static/spxq/spxq-6.png" alt="">
      <div class="bb">
        <span class="mg">美国直邮</span>
        <span>焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g 焕彩萃璨花蕊唇彩4.8g</span>
      </div>
    </div>
    <div class="jiaqian">
      <p class="qian juli">¥169</p>
      <div class="hk">
        <p class="gs">关税:¥10</p>
       <router-link to="/zzc"><p class="xiangqing">详情<img class="xjt" src="/static/spxq/spxq-7.png" alt=""></p></router-link>
      </div>
      <p class="juli">邮费:¥60</p>
    </div>
    <p class="xain"></p>
    <div class="jj">
      <p class="jifen"><img class="jf" src="/static/spxq/spxq-8.png" alt="">500000积分可抵500元，限购1件</p>
    </div>
    <p class="xain"></p>
    <div class="xtb">
      <p class="tp ys"><img class="f" src="/static/spxq/spxq-9.png" alt="">不支持7天无忧退换</p>
      <p class="tp hw"><img class="f" src="/static/spxq/spxq-10.png" alt="">海外直邮</p>
      <p class="tp zp">
        <img class="f" src="/static/spxq/spxq-11.png" alt="">
        正品保证
        <router-link to="/zpbz">
        <img class="yjt" src="/static/spxq/spxq-12.png" alt="">
        </router-link>
      </p>
    </div>
    <p class="xain"></p>
    <div class="zhiyou">
      <img class="guoqi" src="/static/spxq/spxq-6.png" alt="">
      <div class="cc">
        <p class="yg">直邮，下单时需要提供真实姓名和身份证号以及收货地址请先去添加并填写这些信息</p>
        <p class="qtj">去添加</p>
      </div>
    </div>
    <p class="xain"></p>
    <div class="fuji">
      <div class="fj">
        <p class="s1"></p>
        <p class="s2">阿拉粉心得</p>
      </div>
      <p class="s3">查看更多<img class="jiant" src="/static/spxq/spxq-12.png" alt=""></p>
    </div>
    <p class="tiao"></p>
    <div class="dakuang">
      <div class="k1 shuang">
        <p>颜色涂抹上去看着很漂亮，棒棒哒!</p>
        <p><img src="/static/spxq/spxq-13.png" alt="">霜霜</p>
      </div>
      <div class="k1 shuang">
        <p>美美的!</p>
        <p><img src="/static/spxq/spxq-13.png" alt="">爱美丽</p>
      </div>
      <div class="k1 shuang">
        <p>美美的！</p>
        <p><img src="/static/spxq/spxq-13.png" alt="">爱美丽</p>
      </div>
    </div>
    <p class="tiao"></p>
    <div class="pinpai">
      <router-link to="/swxq">
      <img class="pptb" src="/static/spxq/spxq.png" alt="">
      </router-link>
      <div class="bj">
        <p class="pp ping">品牌名字品牌名字</p>
        <p class="yingguo">英国最大彩妆品牌</p>
        <p class="ck">查看<span class="s">10</span>件商品</p>
      </div>
      <p class="jgz"> ＋关注</p>
    </div>
    <p class="ppjs">品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌 介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介...</p>
    <p class="xain"></p>
    <div class="hzp">
      <img src="/static/spxq/spxq-14.png" alt="">
      <img class="t" src="/static/spxq/spxq-15.png" alt="">
      <img src="/static/spxq/spxq-16.png" alt="">
    </div>
    <div class="wz">
      <p>会呼吸道丝滑蜜粉</p>
      <p>会呼吸道丝滑蜜粉</p>
      <p class="h">会呼吸道丝滑蜜粉</p>
    </div>
    <div class="rmb">
      <p class="r">¥199</p>
      <p class="r">¥299</p>
      <p class="r">¥188</p>
    </div>
    <p class="tiao"></p>
    <div class="xx">
      <p class="xhx"></p>
      <p class="sp">商品描述</p>
    </div>
    <p class="xain"></p>

    <p class="ppjs">该模块主要用来描述上面产品，模块大小根据商品描述的内容多 少来决定。该模块主要用来描述上面产品该模块主要用来描述上面产品该模块主要用来描述上面产品该模块主要用来描述上面产 品该模块主要用来描述上面产品该模块主要...</p>
    <p class="xain"></p>
    <div class="xx">
      <p class="xhx"></p>
      <p class="sp">使用方法</p>
    </div>
    <p class="xain"></p>
    <div class="ppjs">
      <p>1.该模块用来介绍产品的使用方法</p>
      <p>2.该模块的大小同样取决于该使用方法内容的多少</p>
      <p>3.所以给摸快的活动性比较大</p>
    </div>
    <p class="xain"></p>
    <div class="xx">
      <p class="xhx"></p>
      <p class="sp">商品图片</p>
    </div>
    <p class="xain"></p>
    <div class="zjy">
      <p><img src="/static/spxq/spxq-5.png" alt=""></p>
      <p><img src="/static/spxq/spxq-5.png" alt=""></p>
    </div>
    <p class="tiao"></p>
    <div class="ll">
      <p class="alf"></p>
      <p >阿拉粉都在买</p>
    </div>
    <p class="xain"></p>
    <div class="hzp">
      <img src="/static/spxq/spxq-14.png" alt="">
      <img class="t" src="/static/spxq/spxq-15.png" alt="">
      <img src="/static/spxq/spxq-16.png" alt="">
    </div>
    <div class="wz">
      <p>会呼吸道丝滑蜜粉</p>
      <p>会呼吸道丝滑蜜粉</p>
      <p class="h">会呼吸道丝滑蜜粉</p>
    </div>
    <div class="rmb">
      <p class="r">¥199</p>
      <p class="r">¥299</p>
      <p class="r">¥188</p>
    </div>
    <div class="xx">
      <p class="xhx"></p>
      <p class="sp">服务承诺</p>
    </div>
    <p class="xain"></p>
    <div class="hzp">
      <img src="/static/spxq/spxq-17.png" alt="">
      <img class="t" src="/static/spxq/spxq-18.png" alt="">
      <img src="/static/spxq/spxq-19.png" alt="">
      <img src="/static/spxq/spxq-20.png" alt="">
    </div>
    <div class="wz">
      <p>正品保证</p>
      <p class="hw">海外直邮</p>
      <p>超时发货补贴</p>
      <p>PICC承保</p>
    </div>

    <div class="xts">
      <img src="/static/spxq/spxq-21.png" alt="">
    </div>

    <div class="shuoming">
      <p>运费相关：英国直邮商品相关运费为50元。</p>
      <p>价格说明：划线价、国内参考价、店头价可能是品牌专柜价、吊 牌价或品牌商提供的指导价等价格，其受国家地区、时间和市场 行情波动的影响而可能与您购物时看到的不一致，该价格仅供参 考。</p>
      <P>商品包装：海外商品包装更换较为频繁，因此顾客您收到的货品有可能与图片不完全一致，页面图片及描述仅供参考，请以您最终收到的实物为准，由此给您带来的不便请您多谅解。</P>
      <p>服务承诺：阿拉灯承诺站内销售商品均为海外原装正品，并会持续为顾客们带来海外最新商品。</p>
    </div>
    <div class="dizuo">
      <p class="zuo"><img src="/static/spxq/spxq-22.png" alt="">在线客服</p>
      <router-link to="/shcont">
        <p class=" zuo you">加入购物车</p>
      </router-link>
    </div>
    <router-view></router-view>



  </div>
</template>

<script>

  import { swiper, swiperSlide} from 'vue-awesome-swiper'
  import Zzc from './Zzc'
  import Zpbz from'./Zpbz'
  export default {

    name: 'xskq',

    data () {

      return {
        swiperOption: {

          autoplay : {

            disableOnInteraction: false, //用户操作后是否禁止自动循环

            delay: 3000 //自自动循环时间

          }, //可选选项，自动滑动

          speed: 2000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）

          loop:true, //循环切换

          grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状

          // setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。

          autoHeight: false,   //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。

          scrollbar: '.swiper-scrollbar',

          mousewheelControl: true, //设置为true时，能使用鼠标滚轮控制slide滑动

          observeParents: true, //当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper

          pagination: {

            el: '.swiper-pagination',

            // type : 'progressbar', //分页器形状

            clickable :true, //点击分页器的指示点分页器会控制Swiper切换

          },

          navigation: {

            nextEl: '.swiper-button-next',

            prevEl: '.swiper-button-prev',

          },

        },

        computed: {

          swiper() {

            return this.$refs.mySwiper.swiper

          }

        }

      }

    },
    components:{
         Zzc,
         Zpbz
    },
methods:{
  sss(){
    history.go(-1);
  }

}

  }
</script>

<style scoped>
  #container img {
    width: 100%;

  }
  .ff{
    display:flex;
    justify-content: space-around;
    align-items: center;
    height: 9.6rem;
    /*margin-bottom: 6rem;*/
    background: #e53e42;
  }

  .zi{
    font-size: 4.8rem;
    color: #fff;
  }
  .jt{
    width: 2.2rem;
    height: 3.8rem;
  }

  .fx{

    margin-right: 2.1rem;
    margin-left: 2.1rem;
  }
  .kuang{
    height: 10rem;
    background: #e53e42;
    font-size: 3rem;
    line-height: 10rem;
  }
  .bt{
    color: #fff;
  }
  .wenzi{
    width: 68.2rem;
    height: 7.1rem;
    font-size: 3rem;
    display:flex;
    justify-content: space-around;
    align-items: center;
    margin-left: 2rem;
    margin-right: 2rem;
  }
  .bb{
    margin-top: 2rem;
  }
  .mg{
    width: 12.2rem;
    color: #e53e42;
    margin-left: 2rem;
    margin-right: 2rem;
  }
  .jiaqian{
    margin-top: 2.5rem;
    /*background: aqua;*/
    line-height: 3rem;
    font-size: 3rem;
    margin-left: 2rem;
  }
  .qian{
    color: #e53e42;
    width: 9.8rem;
    /*background: blueviolet;*/
    /*font-size: 3rem;*/
  }
  .hk{
    display:flex;

    /*background: wheat;*/
    width: 20.3rem;
    letter-spacing: 0.1rem;

  }
  .xiangqing{
    display:inline-block;
    /*width: 6rem;*/
    height: 2.4rem;
    border: 1px solid red;
    color: #e53e42;
    /*margin-left: 20rem;*/

  }
  .gs{
    margin-right: 1rem;
    width: 12.2rem;
    overflow: hidden;
    /*background: green;*/
  }
  .xain{
    border-top: 1px solid #ccc;
  }
  .jj{
    height: 6.1rem;
  }
  .jf {
    margin-left: 2rem;
    margin-right: 3rem;
  }
  .jifen{

    height: 2.1rem;
    font-size: 4.1rem;
    color: #4d4d4d;
    margin-bottom:1.7rem;
    margin-top: 1.7rem;
  }
  .xtb{
    display:flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 1.7rem;
  }
  .tp{
    height: 2.1rem;
    font-size: 2.1rem;
    color: #4d4d4d;
    margin-bottom:1.7rem;
    margin-top: 1.7rem;
    padding-top: 1rem;
  }
  .ys{
    width: 20.4rem;
    color: #e53e42;
  }
  .hw{
    width: 12.4rem;
  }
  .yjt{
    margin-left: 2.1rem;
  }
  .zhiyou{
    height: 10.1rem;
    display:flex;
    justify-content: space-around;
    align-items: center;
  }
  .cc{
    display:flex;
    justify-content: space-around;
    align-items: center;
    width: 62.1rem;
    height: 6.7rem;
    /*background: aqua;*/

    font-size: 2.2rem;
  }
  .yg{
    color: #e53e42;
  }

  .qtj{
    width: 8rem;
    height: 3rem;
    color: #e53e42;
    padding-top: 5px;
    text-align: center;
    border-radius: 50px;
    border: 1px solid #e53e42;
  }
  .fuji{
    display:flex;
    justify-content: space-between;
    align-items: center;

  }

  .fj{
    display:flex;
    justify-content: space-between;
    align-items: center;

  }
  .s1{
    width: 0.6rem;
    height: 3rem;
    margin-right: 2rem;
    font-size: 3rem;
    background: #e53e42
  }
  .s3{
    font-size: 2.2rem;
    color: #4d4d4d;
  }
  .jiant{
    margin-left: 2rem;
    color: #4d4d4d;
  }
  .dakuang{
    height: 24rem;
    display:flex;
    justify-content: space-between;
    border: 1px solid #ccc;
    margin-top: 1.7rem;
    align-items: center;
  }
  .k1{
    width: 22rem;
    height: 20rem;
    border-radius: 10%;
    border: 1px solid #ccc;

  }
  .shuang{
    display:flex;
    justify-content: space-around;
    flex-direction: column;
    font-size: 2.3rem;
  }
  .pinpai{
    width: 68.5rem;
    height: 6rem;
    display:flex;
    justify-content: space-around;
    align-items: center;
    /*background: aqua;*/
  }

  .pp{
    width: 47rem;
    height: 3rem;
    display:flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 4rem;
    /*background: greenyellow;*/

  }
  .pptb{
    margin-top: 4rem;
  }
  .s{
    color: #e53e42;
  }
  .jgz{
    width: 10rem;
    height: 3rem;
    border: 1px solid #e53e42;
    font-size: 2rem;
    padding-top: 0.5rem;
    text-align: center;
    border-radius: 50px;
    color: #e53e42;
    margin-top: 4rem;
  }
  .ppjs{
    width: 68.5rem;
    height: 6.5rem;
    margin-top: 3.9rem;
    margin-bottom: 2.1rem;
    margin-left: 2.1rem;
  }
  .hzp{
    display:flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 3.6rem;
  }
  .t{
    margin-left: 4rem;
  }
  .wz{
    display:flex;
    justify-content: space-around;
    align-items: center;
  }

  .rmb{
    display:flex;
    justify-content: space-around;
    align-items: center;
  }
  .r{
    color: #e53e42;
  }
  .tiao{
    height: 2rem;
    background: #f2f2f2;
  }
  .xx{
    width: 13.3rem;
    height: 3rem;
    font-size: 2.4rem;
    display:flex;
    justify-content: space-around;
    /*margin-top: 6.5rem;*/
    align-items: center;
  }
  .xhx{
    width: 0.6rem;
    height: 3rem;
    border: 1px solid #e53e42;
    background: #e53e42;
  }
  .zjy{
    text-align: center;
    /*background: greenyellow;*/
  }
  .ll{
    width: 16rem;
    height: 3rem;
    font-size: 2.4rem;
    display:flex;
    justify-content: space-around;
    /*margin-top: 6.5rem;*/
    align-items: center;
  }
  .alf{
    width: 0.6rem;
    height: 3rem;
    border: 1px solid #e53e42;
    background: #e53e42;
  }
  .hw{
    margin-left: 3rem;
  }

  .xts{
    margin-left: 2rem;
    margin-bottom: 2.6rem;
    margin-top: 5.2rem;
  }
  .shuoming{
    font-size: 2.4rem;
    margin-left: 2rem;
    margin-right: 2rem;
  }
  .dizuo{
    display:flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    /*margin-top: 3.5rem;*/
    /*line-height: 3.5rem;*/
  }
  .zuo{
    width: 36rem;
    height: 9.6rem;
    font-size: 2.8rem;
    line-height: 9.6rem;

    background: #fff;
  }
  .you{
    background: #e53e42;
    color: #fff;
  }
  zzc{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;


  }
</style>
